export const blogPosts = [
  {
    id: 'post-1',
    title: '如何构建高性能React应用',
    slug: 'how-to-build-high-performance-react-apps',
    category: '前端开发',
    tags: ['React', '性能优化', 'JavaScript'],
    coverImage: 'https://images.unsplash.com/photo-1555099962-4199c345e5dd?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80',
    date: '2023-11-15',
    excerpt: '探索提升React应用性能的关键策略，从代码分割到虚拟化列表，全面提升用户体验。',
    content: `
      # 如何构建高性能React应用

      在当今竞争激烈的数字环境中，应用性能已成为用户体验的关键决定因素。对于React应用程序，即使是微小的性能改进也能显著提升用户满意度和参与度。

      ## 理解React性能瓶颈

      在深入优化策略之前，了解常见的性能瓶颈至关重要：

      1. **不必要的渲染** - 组件在数据未变化时重新渲染
      2. **大型bundle文件** - 导致初始加载时间延长
      3. **未优化的图像和资源** - 增加页面加载时间
      4. **复杂的状态管理** - 导致渲染效率低下
      5. **DOM操作效率低下** - 减慢交互响应时间

      ## 关键优化策略

      ### 1. 代码分割与懒加载

      使用React.lazy()和Suspense实现组件的按需加载：

      \`\`\`jsx
      import React, { Suspense, lazy } from 'react';
      
      // 懒加载组件
      const HeavyComponent = lazy(() => import('./HeavyComponent'));
      
      function App() {
        return (
          <div>
            <Suspense fallback={<div>Loading...</div>}>
              <HeavyComponent />
            </Suspense>
          </div>
        );
      }
      \`\`\`

      ### 2. 使用React.memo避免不必要的渲染

      \`\`\`jsx
      const MyComponent = React.memo(function MyComponent(props) {
        // 只有当props变化时才会重新渲染
        return <div>{props.data}</div>;
      });
      \`\`\`

      ### 3. 虚拟化长列表

      对于长列表，使用react-window或react-virtualized只渲染可见项：

      \`\`\`jsx
      import { FixedSizeList } from 'react-window';
      
      function MyList({ items }) {
        const Row = ({ index, style }) => (
          <div style={style}>
            {items[index].name}
          </div>
        );
      
        return (
          <FixedSizeList
            height={500}
            width={300}
            itemCount={items.length}
            itemSize={50}
          >
            {Row}
          </FixedSizeList>
        );
      }
      \`\`\`

      ### 4. 优化Context API使用

      将状态分割成多个上下文，避免整个组件树重新渲染：

      \`\`\`jsx
      // 分割成多个上下文
      const ThemeContext = React.createContext();
      const UserContext = React.createContext();
      
      function App() {
        const [theme, setTheme] = useState('light');
        const [user, setUser] = useState(null);
      
        return (
          <ThemeContext.Provider value={theme}>
            <UserContext.Provider value={user}>
              <MainContent />
            </UserContext.Provider>
          </ThemeContext.Provider>
        );
      }
      \`\`\`

      ### 5. 使用useCallback和useMemo

      \`\`\`jsx
      function SearchResults({ query, onResultClick }) {
        // 缓存计算结果
        const filteredResults = useMemo(() => {
          return expensiveFilter(query);
        }, [query]);
      
        // 缓存回调函数
        const handleResultClick = useCallback((item) => {
          onResultClick(item.id);
        }, [onResultClick]);
      
        return (
          <ul>
            {filteredResults.map(item => (
              <li key={item.id} onClick={() => handleResultClick(item)}>
                {item.name}
              </li>
            ))}
          </ul>
        );
      }
      \`\`\`

      ## 性能测量工具

      优化过程中，使用以下工具测量和监控性能：

      1. **React DevTools Profiler** - 识别渲染瓶颈
      2. **Lighthouse** - 全面的性能审计
      3. **Web Vitals** - 监控核心性能指标
      4. **Performance API** - 精确测量特定操作

      ## 结论

      构建高性能React应用需要综合方法，从初始架构决策到持续的性能监控。通过实施这些策略，你可以显著提升应用响应速度，改善用户体验，最终提高转化率和用户满意度。

      记住，性能优化是一个持续的过程，随着应用的发展，定期重新评估和调整你的优化策略至关重要。
    `
  },
  {
    id: 'post-2',
    title: '响应式设计最佳实践',
    slug: 'responsive-design-best-practices',
    category: 'UI/UX',
    tags: ['响应式设计', 'CSS', '移动优先'],
    coverImage: 'https://images.unsplash.com/photo-1508921340878-ba53e1f016ec?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80',
    date: '2023-10-28',
    excerpt: '掌握响应式网页设计的核心原则和最佳实践，确保你的网站在所有设备上都能完美展示。',
    content: `
      # 响应式设计最佳实践

      在多设备世界中，响应式设计不再是一种选择，而是必需。本文将探讨响应式网页设计的核心原则和最佳实践，帮助你创建在任何设备上都能完美运行的网站。

      ## 响应式设计的基础

      ### 移动优先原则

      "移动优先"设计方法意味着首先为移动设备设计网站，然后逐步增强以适应更大的屏幕：

      \`\`\`css
      /* 基本样式 - 适用于所有设备 */
      .container {
        width: 100%;
        padding: 15px;
      }
      
      /* 平板电脑及以上 */
      @media (min-width: 768px) {
        .container {
          max-width: 750px;
          margin: 0 auto;
        }
      }
      
      /* 桌面 */
      @media (min-width: 1024px) {
        .container {
          max-width: 970px;
        }
      }
      
      /* 大屏幕 */
      @media (min-width: 1200px) {
        .container {
          max-width: 1170px;
        }
      }
      \`\`\`

      ### 流体网格

      使用百分比而非固定单位创建灵活的布局：

      \`\`\`css
      .row {
        display: flex;
        flex-wrap: wrap;
      }
      
      .column {
        flex: 0 0 100%; /* 移动设备：全宽 */
      }
      
      @media (min-width: 768px) {
        .column {
          flex: 0 0 50%; /* 平板：两列 */
        }
      }
      
      @media (min-width: 1024px) {
        .column {
          flex: 0 0 33.333%; /* 桌面：三列 */
        }
      }
      \`\`\`

      ### 响应式图片

      确保图片能够适应不同屏幕尺寸：

      \`\`\`html
      <img 
        srcset="image-small.jpg 500w, image-medium.jpg 1000w, image-large.jpg 1500w"
        sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw"
        src="image-medium.jpg" 
        alt="响应式图片示例"
      >
      \`\`\`

      ## 高级响应式技术

      ### CSS Grid和Flexbox

      现代布局工具使响应式设计更加简单：

      \`\`\`css
      /* Flexbox示例 */
      .nav {
        display: flex;
        flex-direction: column; /* 移动设备垂直排列 */
      }
      
      @media (min-width: 768px) {
        .nav {
          flex-direction: row; /* 大屏幕水平排列 */
        }
      }
      
      /* CSS Grid示例 */
      .gallery {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 20px;
      }
      \`\`\`

      ### 视口单位

      使用vh、vw、vmin和vmax创建与视口相关的尺寸：

      \`\`\`css
      .hero {
        height: 80vh; /* 视口高度的80% */
        padding: 5vw; /* 视口宽度的5% */
      }
      
      .responsive-text {
        font-size: calc(16px + 1vw); /* 响应式字体大小 */
      }
      \`\`\`

      ### 容器查询

      除了视口查询，容器查询允许基于父元素尺寸应用样式（即将支持）：

      \`\`\`css
      @container (min-width: 400px) {
        .card-content {
          display: flex;
        }
      }
      \`\`\`

      ## 响应式设计测试

      确保在各种设备和浏览器上测试你的设计：

      1. **使用真实设备** - 模拟器无法替代真实设备测试
      2. **浏览器开发工具** - 使用设备模式快速测试
      3. **响应式测试工具** - 如Responsively App、BrowserStack
      4. **性能测试** - 特别关注移动设备上的加载时间

      ## 常见陷阱和解决方案

      ### 触摸交互问题

      \`\`\`css
      /* 增大移动设备上的点击区域 */
      .button {
        min-height: 44px;
        min-width: 44px;
        padding: 12px 16px;
      }
      \`\`\`

      ### 字体可读性

      \`\`\`css
      /* 确保文本在小屏幕上可读 */
      body {
        font-size: 16px; /* 最小基础字体大小 */
      }
      
      h1 {
        font-size: clamp(1.5rem, 5vw, 2.5rem); /* 响应式且有最小/最大限制 */
      }
      \`\`\`

      ### 隐藏/显示内容

      \`\`\`css
      /* 在小屏幕上隐藏非关键内容 */
      .secondary-content {
        display: none;
      }
      
      @media (min-width: 768px) {
        .secondary-content {
          display: block;
        }
      }
      \`\`\`

      ## 结论

      响应式设计是一个持续发展的领域，需要不断学习和适应新技术。通过遵循这些最佳实践，你可以创建在所有设备上都能提供出色用户体验的网站。

      记住，最好的响应式设计是那些用户甚至没有注意到的设计 - 因为无论他们使用什么设备，体验都是无缝和直观的。
    `
  },
  {
    id: 'post-3',
    title: '现代JavaScript框架比较：React vs Vue vs Angular',
    slug: 'modern-javascript-frameworks-comparison',
    category: '前端开发',
    tags: ['JavaScript', 'React', 'Vue', 'Angular'],
    coverImage: 'https://images.unsplash.com/photo-1517180102446-f3ece451e9d8?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80',
    date: '2023-10-10',
    excerpt: '深入比较当今三大主流JavaScript框架的优缺点，帮助你为下一个项目做出明智的技术选择。',
    content: `
      # 现代JavaScript框架比较：React vs Vue vs Angular

      选择合适的前端框架对项目成功至关重要。本文将深入比较React、Vue和Angular这三个主流JavaScript框架的优缺点，帮助你为特定项目需求做出明智的技术选择。

      ## 概述比较

      | 特性 | React | Vue | Angular |
      |------|-------|-----|---------|
      | 类型 | 库 | 渐进式框架 | 完整框架 |
      | 学习曲线 | 中等 | 低 | 高 |
      | 灵活性 | 高 | 高 | 中等 |
      | 生态系统 | 非常丰富 | 丰富 | 丰富 |
      | 性能 | 优秀 | 优秀 | 优秀 |
      | 企业采用 | 高 | 中等 | 高 |
      | 社区支持 | 非常活跃 | 活跃 | 活跃 |

      ## React

      React由Facebook开发和维护，是目前最流行的前端库之一。

      ### 优势

      **1. 组件化架构**

      React的核心是组件化思想，推动了前端开发的模块化：

      \`\`\`jsx
      // React组件示例
      function Welcome(props) {
        return <h1>Hello, {props.name}</h1>;
      }
      
      function App() {
        return (
          <div>
            <Welcome name="Alice" />
            <Welcome name="Bob" />
          </div>
        );
      }
      \`\`\`

      **2. 虚拟DOM**

      React的虚拟DOM实现提供了出色的性能：

      \`\`\`jsx
      // React自动处理DOM更新
      function Counter() {
        const [count, setCount] = useState(0);
        
        return (
          <div>
            <p>You clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>
              Click me
            </button>
          </div>
        );
      }
      \`\`\`

      **3. 单向数据流**

      清晰的数据流使应用状态更可预测：

      \`\`\`jsx
      function ParentComponent() {
        const [data, setData] = useState('Initial data');
        
        return (
          <ChildComponent 
            data={data} 
            updateData={(newData) => setData(newData)} 
          />
        );
      }
      \`\`\`

      **4. 丰富的生态系统**

      React拥有庞大的库和工具生态系统，如Redux、React Router等。

      ### 挑战

      - 需要选择额外的库来构建完整应用
      - JSX可能需要一定的学习时间
      - 频繁更新可能导致兼容性问题

      ## Vue

      Vue由Evan You创建，以易学易用著称。

      ### 优势

      **1. 温和的学习曲线**

      Vue的API设计直观且易于理解：

      \`\`\`vue
      <!-- Vue组件示例 -->
      <template>
        <div>
          <h1>{{ message }}</h1>
          <button @click="reverseMessage">Reverse Message</button>
        </div>
      </template>
      
      <script>
      export default {
        data() {
          return {
            message: 'Hello Vue!'
          }
        },
        methods: {
          reverseMessage() {
            this.message = this.message.split('').reverse().join('')
          }
        }
      }
      </script>
      \`\`\`

      **2. 渐进式框架**

      Vue可以逐步采用，从简单应用到复杂SPA：

      \`\`\`html
      <!-- 简单集成 -->
      <script src="https://cdn.jsdelivr.net/npm/vue"></script>
      
      <div id="app">
        {{ message }}
      </div>
      
      <script>
        var app = new Vue({
          el: '#app',
          data: {
            message: 'Hello Vue!'
          }
        })
      </script>
      \`\`\`

      **3. 综合React和Angular的优点**

      Vue结合了React的虚拟DOM和Angular的模板系统。

      **4. 优秀的文档**

      Vue提供全面且易于理解的文档，支持多种语言。

      ### 挑战

      - 较小的企业支持
      - 插件生态系统虽然丰富但不如React
      - 在某些地区的人才市场较小

      ## Angular

      Angular是由Google维护的完整前端框架。

      ### 优势

      **1. 完整解决方案**

      Angular提供"电池包含"的开发体验：

      \`\`\`typescript
      // Angular组件示例
      @Component({
        selector: 'app-counter',
        template: \`
          <p>Count: {{ count }}</p>
          <button (click)="increment()">Increment</button>
        \`
      })
      export class CounterComponent {
        count = 0;
        
        increment() {
          this.count++;
        }
      }
      \`\`\`

      **2. TypeScript集成**

      Angular深度集成TypeScript，提供强类型保障：

      \`\`\`typescript
      interface User {
        id: number;
        name: string;
        email: string;
      }
      
      @Injectable()
      export class UserService {
        getUser(id: number): Observable<User> {
          return this.http.get<User>(\`/api/users/\${id}\`);
        }
      }
      \`\`\`

      **3. 依赖注入**

      Angular的依赖注入系统促进了模块化和可测试性：

      \`\`\`typescript
      @Injectable()
      export class HeroService {
        constructor(private http: HttpClient) { }
        
        getHeroes(): Observable<Hero[]> {
          return this.http.get<Hero[]>('/api/heroes');
        }
      }
      
      @Component({ ... })
      export class HeroListComponent {
        heroes: Hero[] = [];
        
        constructor(private heroService: HeroService) { }
        
        ngOnInit() {
          this.heroService.getHeroes()
            .subscribe(heroes => this.heroes = heroes);
        }
      }
      \`\`\`

      **4. 企业级支持**

      Google的长期支持使Angular成为企业应用的热门选择。

      ### 挑战

      - 陡峭的学习曲线
      - 较重的框架大小
      - 对小型项目可能过于复杂

      ## 如何选择

      ### 选择React的情况

      - 需要最大的灵活性和定制性
      - 团队已熟悉JavaScript和函数式编程
      - 构建需要频繁状态更新的复杂UI
      - 需要同时支持Web和移动应用(React Native)

      ### 选择Vue的情况

      - 寻求平缓的学习曲线
      - 从较小项目开始，可能逐步扩展
      - 偏好HTML模板和简洁的语法
      - 需要在灵活性和内置功能间取得平衡

      ### 选择Angular的情况

      - 开发大型企业级应用
      - 团队熟悉TypeScript和OOP概念
      - 需要一站式解决方案和严格的项目结构
      - 需要长期稳定性和支持

      ## 性能考量

      三个框架在性能方面各有优势：

      - **React**: 虚拟DOM和Fiber架构提供高效更新
      - **Vue**: 精细的变化检测系统，优化重渲染
      - **Angular**: AOT编译和优化的变化检测

      在大多数实际应用中，性能差异不会成为主要决定因素，更重要的是开发体验和项目需求匹配度。

      ## 结论

      选择前端框架没有放之四海而皆准的答案。React、Vue和Angular各有优势，适合不同类型的项目和团队。关键是评估你的具体需求、团队经验和长期目标，然后做出明智的选择。

      无论选择哪个框架，持续学习和适应新特性和最佳实践都是前端开发成功的关键。
    `
  },
  {
    id: 'post-4',
    title: 'CSS Grid布局完全指南',
    slug: 'complete-guide-to-css-grid',
    category: '前端开发',
    tags: ['CSS', 'Grid布局', '响应式设计'],
    coverImage: 'https://images.unsplash.com/photo-1507721999472-8ed4421c4af2?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80',
    date: '2023-09-22',
    excerpt: '掌握CSS Grid布局系统的所有核心概念，从基础到高级技巧，创建复杂而灵活的网页布局。',
    content: `
      # CSS Grid布局完全指南

      CSS Grid是一个强大的二维布局系统，彻底改变了我们设计网页布局的方式。本指南将从基础到高级，全面介绍CSS Grid的所有核心概念和技巧。

      ## Grid布局基础

      ### 创建Grid容器

      通过设置\`display: grid\`创建网格容器：

      \`\`\`css
      .container {
        display: grid;
        grid-template-columns: 200px 200px 200px; /* 三列，每列200px */
        grid-template-rows: 100px 100px; /* 两行，每行100px */
        gap: 20px; /* 行和列之间的间距 */
      }
      \`\`\`

      ### fr单位和repeat()函数

      使用fr单位创建弹性网格，使用repeat()简化代码：

      \`\`\`css
      .container {
        display: grid;
        /* 3列等宽布局 */
        grid-template-columns: repeat(3, 1fr);
        /* 第一行100px，第二行200px */
        grid-template-rows: 100px 200px;
      }
      \`\`\`

      ### minmax()函数

      设置尺寸的最小和最大值：

      \`\`\`css
      .container {
        display: grid;
        /* 列宽最小100px，最大为1fr */
        grid-template-columns: repeat(3, minmax(100px, 1fr));
      }
      \`\`\`

      ## 项目放置

      ### 使用grid-column和grid-row

      控制项目跨越的列和行：

      \`\`\`css
      .item1 {
        /* 从第1条网格线开始，到第4条网格线结束 */
        grid-column: 1 / 4;
        /* 从第1条网格线开始，跨越2行 */
        grid-row: 1 / span 2;
      }
      \`\`\`

      ### 网格区域命名

      使用grid-template-areas创建命名区域：

      \`\`\`css
      .container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: auto auto auto;
        grid-template-areas: 
          "header header header"
          "sidebar content content"
          "footer footer footer";
      }
      
      .header { grid-area: header; }
      .sidebar { grid-area: sidebar; }
      .content { grid-area: content; }
      .footer { grid-area: footer; }
      \`\`\`

      ## 自动布局算法

      ### 自动放置项目

      使用grid-auto-flow控制自动放置行为：

      \`\`\`css
      .container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        /* 先填充行，再创建新列 */
        grid-auto-flow: row;
        /* 或先填充列，再创建新行 */
        /* grid-auto-flow: column; */
      }
      \`\`\`

      ### 自动调整大小

      自动创建行和列：

      \`\`\`css
      .container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        /* 当项目溢出时，自动创建高为100px的行 */
        grid-auto-rows: 100px;
      }
      \`\`\`

      ## 对齐控制

      ### 对齐网格项目

      控制项目在单元格内的对齐：

      \`\`\`css
      .container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        /* 水平对齐 */
        justify-items: center; /* start | end | center | stretch */
        /* 垂直对齐 */
        align-items: center; /* start | end | center | stretch */
      }
      
      /* 单个项目的对齐 */
      .item {
        justify-self: end;
        align-self: start;
      }
      \`\`\`

      ### 对齐整个网格

      控制整个网格在容器内的对齐：

      \`\`\`css
      .container {
        display: grid;
        grid-template-columns: repeat(3, 100px); /* 固定宽度小于容器 */
        height: 500px; /* 高于网格内容 */
        
        /* 水平对齐整个网格 */
        justify-content: center; /* start | end | center | stretch | space-around | space-between | space-evenly */
        
        /* 垂直对齐整个网格 */
        align-content: center; /* start | end | center | stretch | space-around | space-between | space-evenly */
      }
      \`\`\`

      ## 响应式网格布局

      ### 使用auto-fill和auto-fit

      创建自适应数量的列：

      \`\`\`css
      .container {
        display: grid;
        /* 自动填充尽可能多的列，每列最小200px */
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        
        /* 或自动适应内容，可能会拉伸现有列 */
        /* grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); */
      }
      \`\`\`

      ### 结合媒体查询

      根据屏幕尺寸调整网格：

      \`\`\`css
      .container {
        display: grid;
        /* 移动设备：单列 */
        grid-template-columns: 1fr;
      }
      
      @media (min-width: 600px) {
        .container {
          /* 平板：两列 */
          grid-template-columns: repeat(2, 1fr);
        }
      }
      
      @media (min-width: 900px) {
        .container {
          /* 桌面：三列 */
          grid-template-columns: repeat(3, 1fr);
        }
      }
      \`\`\`

      ## 高级技巧

      ### 叠加元素

      在同一网格单元格放置多个项目：

      \`\`\`css
      .item1 {
        grid-column: 1 / 3;
        grid-row: 1 / 3;
        z-index: 1; /* 控制堆叠顺序 */
      }
      
      .item2 {
        grid-column: 2 / 4;
        grid-row: 2 / 4;
        z-index: 2; /* 显示在item1上面 */
      }
      \`\`\`

      ### 子网格(Subgrid)

      允许子元素继承父网格的轨道尺寸(新特性，兼容性有限)：

      \`\`\`css
      .container {
        display: grid;
        grid-template-columns: repeat(9, 1fr);
        grid-template-rows: repeat(4, minmax(100px, auto));
      }
      
      .item {
        grid-column: 2 / 7;
        grid-row: 2 / 4;
        display: grid;
        grid-template-columns: subgrid;
        grid-template-rows: subgrid;
      }
      \`\`\`

      ### 网格模板区域动画

      通过改变grid-template-areas创建布局动画：

      \`\`\`css
      @keyframes layout-change {
        0% {
          grid-template-areas: 
            "header header header"
            "sidebar content content"
            "footer footer footer";
        }
        50% {
          grid-template-areas: 
            "header sidebar footer"
            "content content content"
            "content content content";
        }
        100% {
          grid-template-areas: 
            "header header header"
            "content content sidebar"
            "footer footer footer";
        }
      }
      
      .container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: auto auto auto;
        grid-template-areas: 
          "header header header"
          "sidebar content content"
          "footer footer footer";
        animation: layout-change 10s infinite alternate;
      }
      \`\`\`

      ## 常见布局示例

      ### 圣杯布局

      \`\`\`css
      .container {
        display: grid;
        grid-template-columns: 200px 1fr 200px;
        grid-template-rows: auto 1fr auto;
        grid-template-areas: 
          "header header header"
          "sidebar content aside"
          "footer footer footer";
        min-height: 100vh;
      }
      
      .header { grid-area: header; }
      .sidebar { grid-area: sidebar; }
      .content { grid-area: content; }
      .aside { grid-area: aside; }
      .footer { grid-area: footer; }
      \`\`\`

      ### 图片画廊

      \`\`\`css
      .gallery {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 15px;
      }
      
      .gallery-item:nth-child(3n) {
        grid-column: span 2;
        grid-row: span 2;
      }
      \`\`\`

      ## 浏览器兼容性和回退方案

      虽然CSS Grid在现代浏览器中得到广泛支持，但对于旧浏览器，可以提供回退方案：

      \`\`\`css
      /* 回退方案：使用Flexbox */
      .container {
        display: flex;
        flex-wrap: wrap;
      }
      
      .item {
        flex: 1 1 300px;
        margin: 10px;
      }
      
      /* 现代浏览器：使用Grid */
      @supports (display: grid) {
        .container {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
          gap: 20px;
        }
        
        .item {
          margin: 0; /* 移除Flexbox的margin */
        }
      }
      \`\`\`

      ## 结论

      CSS Grid是一个革命性的布局工具，提供了前所未有的布局能力。通过掌握这些概念和技巧，你可以创建复杂、灵活且响应式的网页布局，同时减少HTML标记和媒体查询的复杂性。

      随着浏览器支持的不断改进和新特性的加入，CSS Grid将继续发展并成为现代网页设计的核心工具。
    `
  }
];
